<template>
    <div class="wrapper">
        <HeaderNav title="上传设计"
        >
            <SvgIcon icon="icon-xingzhuanghei" slot="right" style="font-size: 20px;color:#222" @click.native="$router.replace('/')"></SvgIcon>
        </HeaderNav>
        <div class="progress">
            <div class="progress-item" @click="()=>{$router.push({path:'/design/upload'})}">
                <div class="title">上传</div>
                <div class="arrow">
                    <img src="http://lc-hsgiqTbn.cn-n1.lcfile.com/a5a8311a0af19027724d.png"

                    ></img>
                </div>
            </div>
            <div class="progress-item" @click="()=>{$router.push({path:'/design/edit'})}">
                <div class="title">编辑</div>
                <div class="arrow">
                    <img src="http://lc-hsgiqTbn.cn-n1.lcfile.com/a5a8311a0af19027724d.png"
                         :style="{opacity:
                         (getStore('design.designItem').status==1
                         )?0:1}"
                    ></img>
                </div>
            </div>
            <div class="progress-item" @click="()=>{$router.push({path:'/design/publish'})}">
                <div class="title">发布</div>
                <div class="arrow">
                    <img src="http://lc-hsgiqTbn.cn-n1.lcfile.com/a5a8311a0af19027724d.png"
                         :style="{opacity:
                         (getStore('design.designItem').status==1||
                         getStore('design.designItem').status==2
                         )?0:1}"
                    ></img>
                </div>
            </div>
        </div>
        <div class="content">
            <router-view></router-view>
        </div>

    </div>
</template>
<script>
    import HeaderNav from '../../components/HeaderNav'
    import ImageIcon from '../../components/iconImage'
    import withStore from "../../vuex/withStore";
    import SvgIcon from '../../components/svgIcon'

    export default withStore({
        components: {
            HeaderNav, ImageIcon,SvgIcon
        }
    })
</script>
<style lang="less" scoped>
    .wrapper {
        .progress {
            display: flex;
            align-items: center;
            height: px2rem(100);
            padding-left: px2rem(20);
            padding-right: px2rem(20);
            border-bottom: 1px solid #eee;
            box-shadow: 0 1px 1px #fcfcfc;
            .progress-item {
                flex-direction: column;
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 1;
                .arrow {
                    width: px2rem(150);
                    height: px2rem(40);
                    img {
                        max-width: 100%;
                        max-height: 100%;
                    }
                }
            }
        }
    }
</style>